<template>
  <div class="panel">
    <div class="tao"><div id="main" class="bing" ref="bing"></div></div>
  </div>
</template>
<script>
export default {
  data () {
    return {}
  },
  mounted () {
    this.setBing()
  },
  methods: {
    setBing () {
      var echarts = require('echarts')

      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(this.$refs.bing)

      // 指定图表的配置项和数据
      let option = {
        title: {
          text: '单位 万',
          textStyle: {
            color: '#4996f5',
            fontSize: 14
          },
          left: 30
        },
        grid: {
          //与绝对定位相似，top，left，right，bottom 设定是根据上级盒子宽高来计算
          top: '35%',
          left: '8%',
          right: '18%',
          bottom: '8%'
        },
        tooltip: {
          // trigger: 'axis'
        },
        //图例实例
        legend: {
          data: ['最高额度', '最低额度'],
          textStyle: {
            color: '#4995f4'
          },
          right: 50
        },
        //工具栏
        // toolbox: {
        //     show: true,
        //     feature: {
        //         dataZoom: {
        //             yAxisIndex: 'none'
        //         },
        //         dataView: {
        //             readOnly: false
        //         },
        //         magicType: {
        //             type: ['line', 'bar']
        //         },
        //         restore: {},
        //         saveAsImage: {}
        //     }
        // },
        xAxis: {
          type: 'category', //类目轴
          boundaryGap: false, //坐标轴两边留白策略
          data: [
            '1月',
            '2月',
            '3月',
            '4月',
            '5月',
            '6月',
            '7月',
            '8月',
            '9月',
            '10月',
            '11月',
            '12月'
          ],
          //x轴刻度
          axisTick: {
            show: false
          },
          //x轴文本
          axisLabel: {
            color: '#438be5', //颜色
            align: 'left' //文本和刻度线的对齐方式
          },
          //x轴轴线
          axisLine: {
            lineStyle: {
              color: '#012b48'
            }
          }
        },
        yAxis: {
          type: 'value',
          // y轴最大值
          max: 500,
          // 分割的最大值/最小值
          minInterval: 100,
          maxInterval: 100,
          //y轴文本
          axisLabel: {
            // formatter: '{value} °C',
            color: '#438be5'
          },
          //y轴刻度
          axisTick: {
            show: false
          },
          //y轴轴线
          axisLine: {
            lineStyle: {
              color: '#012b48'
            }
          },
          //y轴分割线
          splitLine: {
            lineStyle: {
              color: '#012b48'
            }
          }
        },
        series: [
          {
            name: '最高额度',
            type: 'line',
            data: [24, 440, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
            //是否平滑
            smooth: true,
            //圈的大小
            symbolSize: 8,
            //项颜色(线条和圆圈)
            itemStyle: {
              color: '#00f2f1'
            }
            //线条的颜色
            // lineStyle:{
            //     color:'green'
            // }
            //区域包含的颜色
            // areaStyle:{
            //     color:'green'
            // }
            // 标记点
            // markPoint: {
            //     data: [{
            //             type: 'max',
            //             name: '最大值'
            //         },
            //         {
            //             type: 'min',
            //             name: '最小值'
            //         }
            //     ]
            // },
            // 标记线
            // markLine: {
            //     data: [{
            //         type: 'average',
            //         name: '平均值'
            //     }]
            // }
          },
          {
            name: '最低额度',
            type: 'line',
            data: [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79],
            //是否平滑
            smooth: true,
            //圈的大小
            symbolSize: 8,
            //项颜色(线条和圆圈)
            itemStyle: {
              color: '#dd3c36'
            }
          }
        ]
      }

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
    }
  }
}
</script>
<style lang="less" scoped>
.bing {
  height: 300px;
  width: 400px;
}
.panel {
  width: 400px;
  height: 80%;
  margin-top: -50px;
  position: relative;
  /* 使用图像边框就一定要给盒子设置边框 */
  border: 20px solid red;
  border-width: 50px 20px 22px 128px;
  box-sizing: border-box;
  border-image-source: url('../../assets/images/border.png');
  border-image-slice: 50 20 22 128;
  border-image-width: 50px 20px 22px 128px;
  /* 边框图片拉伸 */
  border-image-repeat: stretch;
  .title {
    color: #fff;
  }
  .tao {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: -100px;
    right: 0;
    // background-color: #fff;
  }
}
</style>
